import 'package:flutter/material.dart';

class TextFieldPage extends StatefulWidget {
  final Map<String, dynamic> arguments;
  TextFieldPage({Key key, this.arguments}) : super(key: key);

  @override
  _TextFieldPageState createState() => _TextFieldPageState();
}

class _TextFieldPageState extends State<TextFieldPage> {
  // 实现初始默认值, 并保存输入的用户名
  final _userNameEditing = () {
    var e = TextEditingController();
    e.text = 'Troye Sivan';
    e.addListener(() {
      print('_userNameEditing addListener: ' + e.text);
    });
    return e;
  }();

  // 保存输入的密码
  var _pwd;

  @override
  void dispose() {
    super.dispose();
    this._userNameEditing.dispose(); // 需要释放
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(
          title: Text('TextFieldPage'),
          actions: <Widget>[
            IconButton(
                icon: Icon(Icons.refresh),
                onPressed: () {
                  print('userName: ${this._userNameEditing.text}, pwd: ${this._pwd}');
                })
          ],
        ),
        body: ListView(
          children: <Widget>[
            ListTile(
              subtitle: SingleChildScrollView(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text('''
- controller;
- decoration;
  hintText;'''),
                    Container(
                      padding: EdgeInsets.only(left: 15.0, right: 15.0),
                      height: 60.0,
                      alignment: Alignment.bottomLeft,
                      child: TextField(
                        controller: this._userNameEditing,
                        decoration: InputDecoration(
                          hintText: '请输入姓名',
                        ),
                      ),
                    )
                  ],
                ),
              ),
            ),
            Divider(height: 20.0, color: Colors.red, thickness: 2.0),
            ListTile(
              subtitle: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  SingleChildScrollView(
                    child: Text('''
- obscureText;
- decoration;
  hintText;
- onChanged;
- onSubmitted;'''),
                  ),
                  Container(
                    padding: EdgeInsets.only(left: 15.0, right: 15.0),
                    height: 60.0,
                    alignment: Alignment.bottomLeft,
                    child: TextField(
                      obscureText: true,
                      decoration: InputDecoration(
                        hintText: '密码输出 <obscureText>',
                      ),
                      onChanged: (value) {
                        print(value);
                        this._pwd = value;
                      },
                      onSubmitted: (value) {
                        print(value);
                      },
                    ),
                  ),
                ],
              ),
            ),
            Divider(height: 20.0, color: Colors.red, thickness: 2.0),
            ListTile(
              subtitle: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  SingleChildScrollView(
                    child: Text('''
- maxLines;
- decoration;
  hintText;
  border;'''),
                  ),
                  Container(
                    padding: EdgeInsets.only(left: 15.0, right: 15.0),
                    height: 70.0,
                    alignment: Alignment.bottomLeft,
                    child: TextField(
                      maxLines: 10,
                      decoration: InputDecoration(
                        hintText: '多行输入 <maxLines>',
                        border: OutlineInputBorder(),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Divider(height: 20.0, color: Colors.red, thickness: 2.0),
            ListTile(
              subtitle: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  SingleChildScrollView(
                    child: Text('''
- decoration;
  labelText;
  filled;
  fillColor;'''),
                  ),
                  Container(
                    padding: EdgeInsets.only(left: 15.0, right: 15.0),
                    height: 60.0,
                    alignment: Alignment.bottomLeft,
                    child: TextField(
                      decoration: InputDecoration(
                        labelText: '输入用户名 <labelText>',
                        filled: true,
                        fillColor: Colors.green,
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Divider(height: 20.0, color: Colors.red, thickness: 2.0),
            ListTile(
              subtitle: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  SingleChildScrollView(
                    child: Text('''
- obscureText;
- decoration;
  labelText;
  border;'''),
                  ),
                  Container(
                    padding: EdgeInsets.only(left: 15.0, right: 15.0),
                    height: 60.0,
                    alignment: Alignment.bottomLeft,
                    child: TextField(
                      obscureText: true,
                      decoration: InputDecoration(
                        labelText: '密码',
                        border: OutlineInputBorder(),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Divider(height: 20.0, color: Colors.red, thickness: 2.0),
            ListTile(
              subtitle: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  SingleChildScrollView(
                    child: Text('''
- obscureText;
- decoration;
  hintText;
  icon;'''),
                  ),
                  Container(
                    padding: EdgeInsets.only(left: 15.0, right: 15.0),
                    height: 60.0,
                    alignment: Alignment.bottomLeft,
                    child: TextField(
                      obscureText: true,
                      decoration: InputDecoration(
                        hintText: '用户',
                        icon: Icon(Icons.people),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
